<!--
 * @FileDescription: home页面中点击搜索出现的页面
 * @Author: yijiamu
 * @Date: 2022-05-08 18:35:34
 * @LastEditors: yijiamu
 * @LastEditTime: 2022-05-08 18:35:34
 -->
<template>
  <div>
    <!--    搜索组件-->
    <search-com
      :searchMethod="searchMethod"
      :query="query"
      :crumbValue = "crumbValue"
      :placeholderValue = "'请输入搜索的位置名称'"
      @putSearchList="getSearchList"/>
    <!--    面包屑历史记录组件-->
    <crumbs-history-com
      v-if="!shopList.length"
      :historyListName = "'shopHistory'"
      @putHistoryValue="getHistoryValue"/>
    <shop-list-com
      :shopListArr="shopList"
      :geohash="geohash"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import {searchMethods, searchShopQuery} from "@/utils/utilsType";
import {IShopList} from "@/api/config/responseType";

@Component({components: {}})
export default class searchShopCom extends Vue {
  private query !: searchShopQuery; //传给search的query参数
  private searchMethod = "searchShopQuery" as searchMethods; //提供给search组件当前组件的说明
  private crumbValue = '' as string;  //面包屑的值
  private shopList =[] as IShopList[] // 搜索城市列表的结果
  private geohash = this.$route.query.geohash as string |(string | null)[]  //坐标数据
  beforeMount(){
    this.query = {
      keyword : '',
      geohash : this.geohash,
    }
  }
/**
 * @description: 从search组件传出的数据，在这里进行赋值
 * @return {void}
 * @param shopList
 */
  private getSearchList(shopList: IShopList[]){
    this.shopList = shopList;
  }
/**
 * @description: 面包屑的回调函数，获得面包屑的值
 * @return {void}
 * @param value
 */
  private getHistoryValue(value:string){
    this.crumbValue = value;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>
